<template>
  <div>
    <!-- 卡片类型 -->
    <a-upload v-model:file-list="fileList" :headers="item.headers" name="file">
      <!-- 卡片上传类型按钮 picture-card -->
      <div v-if="item.listType === 'picture-card'">
        <div
          class="picture-card flex flex-col justify-center items-center w-100px h-100px border rounded-md cursor-pointer"
        >
          <PlusOutlined class="text-20px mb-10px" />
          <div class="text-16px">点击上传</div>
        </div>
      </div>
      <!-- 图片列表样式 picture-->
      <div class="picture" v-if="item.listType === 'picture'"></div>
      <!-- 文件样式，默认 text -->
      <div class="text-file" v-if="item.listType === 'text'"></div>
      <!-- 自定义上传样式-插槽形式 -->
      <slot name="custom"> </slot>
    </a-upload>
    <!-- 列表类型 -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";

interface Item {
  listType: string;
}

const props = withDefaults(
  defineProps<{
    item: Item;
  }>(),
  {
    item: () => ({
      listType: "text",
      headers: () => ({}),
      style: () => ({}),
    }),
  }
);

const fileList = ref([]);
</script>

<style scoped></style>
